<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>分页条插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />

	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		hy.pagination("#exp1",134);

		hy.pagination("#exp2",{
			pageList: [5,10,15,20],
			totalRows: 145,
			pageSize: 15
		});

		hy.pagination("#exp3", {
			totalRows: 100,
			style: "mini"
		});

		hy.pagination("#exp4", {
			totalRows: 119,
			style: "mini",
			jump: true
		});

		hy.pagination("#exp6", {
			pageList: [20,30,40,50],
			totalRows: 599,
			pageSize: 30,
			style: "default",
			info: "{current} of {pages}",
			onChange: function(pager) {
				hy.message(pager.json(),["right:2","bottom:2"]);
			}
		});

	});
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">分页插件演示用例。</div> <strong>1.</strong>
		快速分页 <em>quick pagination</em>
		指定分页条容器和总记录数
		<pre><code class="javascript">hy.pagination(".ui.small.menu",134);</code></pre>

		<div id="exp1" class="ui small menu"></div>
		<p>&nbsp;</p> <strong>2.</strong>
		自定义每页显示记录数 <em>defined page size</em>
		以数组方式定义每页显示记录数
		<pre><code class="javascript">hy.pagination(".ui.small.menu",{
    pageList: [5,10,15,20],
    totalRows: 145,
    pageSize: 15
});</code></pre>

		<div id="exp2" class="ui small menu"></div>
		<p>&nbsp;</p>
		<strong>3.</strong>
		自定分页样式
		<em>mini pagination style</em>
		迷你简短型分页条
		<pre><code class="javascript">hy.pagination(".ui.small.menu", {
    totalRows: 100,
    style: "mini"
});</code></pre>

		<div id="exp3" class="ui small menu"></div>
		<p>&nbsp;</p>
		<strong>4.</strong>
		自定分页样式
		<em>jump property</em>
		迷你简短型可跳转分页条 jump属性针对mini型有效
		<pre><code class="javascript">hy.pagination(".ui.small.menu", {
    totalRows: 119,
    style: "mini",
    jump: true
});</code></pre>

		<div id="exp4" class="ui small menu"></div>
		<p>&nbsp;</p>
		<strong>5.</strong>
		分页条配置信息
		<pre><code class="javascript">// 默认配置
pagination.defaults = {
    totalRows: 0, // 总页数
    pageSize: 10, // 每页显示记录
    style: "default", // defualt | mini
    pageList : null, // 用户自定义每页显示记录 [10,20,30...]
    jump: false, // mini 样式时跳转功能,
    info: null, // 分页信息显示模板  参照5.2
    onChange: function(pager){} // 翻页操作触发回调函数(分页模型) 参照5.1
};</code></pre>
		<p>&nbsp;</p>
		<strong>5.1</strong>
		分页模型
		<em>pager model</em>
		分页条翻页操作回调参数
		<pre><code class="javascript">// onChage(pager);
/**
 * 分页模型
 *
 * @property totalRows 总记录
 * @property pageSize 每页显示记录
 * @property startRow 起始记录
 * @property currentPage 当前页
 * @property totalPages 总页数
 *
 * @method initialize 初始化
 * @method turning 翻页
 * @method hasPrev 是否有上一页
 * @method hasNext 是否有下一页
 * @method serialize 序列化
 * @method json 转为JSON字符串
 * @method reset 重置每页显示记录
 */

function Pager(totalRows, pageSize) {
    this.totalRows = totalRows || 0;
    this.pageSize = pageSize || 30;
    this.startRow = 0;
    this.currentPage = 1;
    this.totalPages = 0;
    this.initialize();
};</code></pre>
		<p>&nbsp;</p>
		<strong>5.2</strong>
		信息模板
		<em>information template</em>
		分页信息显示 通过占位符替换分页信息
		<pre><code class="javascript">// default 样式模板
"infomation": "共{pages}页{rows}条记录 当前显示{from}到{to}条记录"

// mini 样式模板
"infomation": "{current}/{pages}"

//  占位符说明
// 通过花括号加上属性名称占位 如："当前页/总页数 {current}/{pages}"
var params = {
	rows: pager.totalRows, // 总记录数
	pages: pager.totalPages, // 总页数
	current: pager.currentPage, // 当前页
	from: pager.startRow + 1, // 开始记录位置
	to: end // 结束记录位置
}</code></pre>
		<p>&nbsp;</p>
		<strong>6.</strong>
		综合演示
		<pre><code class="javascript">// demos
hy.pagination("#exp6", {
	pageList: [20, 30, 40, 50],
	totalRows: 599,
	pageSize: 30,
	style: "default",
	info: "{current} of {pages}",
	onChange: function(pager) {
		hy.message(pager.json(), ["right:2", "bottom:2"]);
	}
});</code></pre>
		<div id="exp6" class="ui small menu"></div>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>
	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>